import { Modal, Button,Checkbox,Row,Col } from 'antd';
import {SettingOutlined} from '@ant-design/icons';


class VModal extends React.Component {
  state = { 
      visible: false ,
      columns:[],
      dataCol:[{
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      }],
      data:[
          {
              name:'张三',
              age:'10',
              address:'西溪首座1'
          },
          {
            name:'李四',
            age:'5',
            address:'西溪首座2'
          },{
            name:'春杭',
            age:'101',
            address:'西溪首座B2-6'
          },{
            name:'夜深',
            age:'12',
            address:'西溪首座B2-6'
          }
      ],
      newDate:[]
    };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    this.setState({
      visible: false,
    });
    console.log(this.state.columns);
    this.props.changeColumns(this.state.columns,this.state.newDate);
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  onChange =(values)=>{
    let arr =[];
    this.state.data.map((item,index)=>{
        let data={};
        values.map((col)=>{
           data[col]=item[col];
        })
        arr.push(data);
    });
    console.log('arr:',arr,values);
    this.setState({columns:values,newDate:arr});
  }

  render() {
    return (
      <div>
        <Button type="" shape="circle" onClick={()=>this.showModal()}>
                    <SettingOutlined  />
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
            
            <Checkbox.Group style={{ width: '100%' }} onChange={this.onChange}>
                <Row>
                    {
                        this.state.dataCol.map((item,index)=>{
                            
                            return   <Col span={8} key={item.key}>
                                        <Checkbox value={item.key}>{item.title}</Checkbox>
                                    </Col>
                        })
                    }
                    
                </Row>
            </Checkbox.Group>



        </Modal>
      </div>
    );
  }
}


export default VModal;